<template>
  <div class="main">
    <input type="点击搜索" class="input_text"  placeholder="请输入要翻译的文本">
    <input class="translate" type='button' value="翻译" @click='translate()'/>
    <div class="clear" v-if='!hasQuery'>欢迎使用词典
      <br>
      <br>
      <br>
      <br>
    </div>
    <div class="welcome"></div>
    <div class="result" v-if='hasQuery'>
      <div class="cur cur-name">{{ query }}</div>
      <p class='tishi'>翻译</p>
      <div class="cur cur-fanyi">{{ curWord.fanyi }}</div>
      <p class="tishi">发音</p>
      <div class="cur cur-fayin">{{ curWord.fayin}}</div>
      <p class="tishi">释义</p>
      <ul class="cur cur-shiyi"><li v-for='item,index in curWord.shiyi'>
        <span>{{item}}</span>
      </li>
      </ul>
      <p class="tishi">网络翻译</p>
      <ul class="cur cur-wlfy">
        <li v-for='item,index in curWord.wlfy'>
          <p>{{item.key}}</p>
          <p>{{item.value}}</p>
        </li>
      </ul>
    </div>
    <div class="history">
        <ul v-if='hasHistory' class='history-items'>
          <li class='history-item' @click='queryAll()'>历史</li>
          <li v-for='item,index in queryHistory' :class="index==0?'history-item-active':''" class='history-item' @click='translateH(index)'>{{ item }}
          </li>
      </ul>
    </div>
    
  </div>
</template>

<script>
// import {fetchData} from './ajax/fetchData.js'
export default {
  name: 'main',
  data () {
      return {
        
      }
  },
  mounted() {
  },
  props: {},
  components: {
     
  },
  methods: {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
